<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, reactive, ref } from 'vue'
import { requestAttentionList } from "../../utils/axiosURL"
import defaultImg from "../../assets/logo.png";

const route = useRoute()
const userID = ref<any>(route.query.id)
const userNickNames = ref(route.query.nickNames)
// 用户关注列表数据
let userFollowsList = reactive<any>([])

// 请求用户关注列表数据
const requestAttentionListFn = () => {
  requestAttentionList(userID.value).then((data: any) => {
    userFollowsList.values = data.follow
  }).catch(_ => { })
}
// 注册局部自定义指令
const vLazy = {
  mounted(el: HTMLImageElement, binding: any) {
    // el表示使用指令的DOM元素
    // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindling即是xxx对应的内容
    // 指令的功能：实现图片的懒加载
    // 1、监听图片是否进入可视区
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      // true；进入可视区域，false：未进入可视区域
      if (isIntersecting) {
        // 1、给图片的src属性赋值图片的地址
        el.src = binding.value
        // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
        observer.unobserve(el)
        // 3、加载的图片失败了，显示默认的图片地址
        el.onerror = () => {
          el.src = defaultImg
        }
      }
    }, {
      threshold: 0
    })
    observer.observe(el)
  },
};

onMounted(() => {
  requestAttentionListFn()
})
</script>

<template>
  <div class="payAttentionTo">
    <p class="attentionTitle">{{ userNickNames }}的关注</p>
    <ul class="attentionList">
      <li class="attentionItem" v-for="item in userFollowsList.values">
        <div class="leftWrap">
          <RouterLink :to="{ path: '/userDetail', query: { id: item.userId } }">
            <img v-lazy="`${item.avatarUrl}`" alt="">
          </RouterLink>
        </div>
        <div class="rightWrap">
          <div class="textInfo">
            <p class="userName">
              <span>{{ item.nickname }}</span>
              <span v-if="item.vipType === 1" class="iconfont icon-VIP-1"></span>
              <span v-if="item.vipType === 2" class="iconfont icon-VIP-02"></span>
              <span v-if="item.vipType === 3" class="iconfont icon-VIP-03"></span>
              <span v-if="item.vipType === 4" class="iconfont icon-VIP-04"></span>
              <span v-if="item.vipType === 5" class="iconfont icon-VIP-"></span>
              <span v-if="item.vipType === 6" class="iconfont icon-VIP-06"></span>
              <span v-if="item.vipType === 7" class="iconfont icon-VIP-07"></span>
              <span v-if="item.vipType === 8" class="iconfont icon-VIP-08"></span>
              <span v-if="item.vipType === 9" class="iconfont icon-VIP-09"></span>
              <span v-if="item.vipType === 10" class="iconfont icon-VIP-10"></span>
              <span v-if="item.vipType === 11" class="iconfont icon-VIP-11"></span>
            </p>
            <p v-if="item.signature" class="userIntroduce">{{ item.signature }}</p>
            <p class="songListAndVermicelli">
              <span class="songList">歌单: {{ item.playlistCount }}</span>
              <span>粉丝: {{ item.followeds }}</span>
            </p>
          </div>
          <div class="addPayAttention">
            <button>
              <span class="iconfont icon-jiahao"></span>
              关注
            </button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.payAttentionTo {
  width: 100%;
  height: 93%;

  .attentionTitle {
    font-size: $font-size-lg2;
    font-family: $textFont;
    margin-left: 30px;
    line-height: 60px;
  }

  .attentionList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px 20px 150px 0px;
    box-sizing: border-box;

    .attentionItem {
      display: flex;
      width: 385px;
      height: 115px;
      margin-bottom: 30px;
      padding: 0 10px;
      box-sizing: border-box;

      &:nth-child(even) {
        margin-left: 15px;
      }

      &:nth-child(odd) {
        margin-left: 15px;
      }

      .leftWrap {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-basis: 115px;
        width: 115px;
        height: 115px;

        img {
          width: 101px;
          height: 101px;
          border-radius: 50%;
        }
      }

      .rightWrap {
        flex: 1;
        display: flex;
        padding: 10px 0;
        box-sizing: border-box;

        .textInfo {
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          flex-basis: 180px;

          p {
            font-family: $textFont;
          }

          .userName {
            font-size: $font-size-sm;
            color: $font_second_color;

            .icon-VIP-1 {
              color: rgb(253, 237, 212)
            }

            .icon-VIP-02 {
              color: rgb(158, 196, 246)
            }

            .icon-VIP-03 {
              color: rgb(240, 76, 124)
            }

            .icon-VIP-04 {
              color: rgb(216, 99, 242)
            }

            .icon-VIP- {
              color: rgb(76, 180, 231)
            }

            .icon-VIP-06 {
              color: rgb(252, 193, 45)
            }

            .icon-VIP-07 {
              color: rgb(243, 166, 148)
            }

            .icon-VIP-08 {
              color: rgb(220, 199, 225)
            }

            .icon-VIP-09 {
              color: rgb(221, 187, 153)
            }

            .icon-VIP-10 {
              color: rgb(229, 168, 75)
            }

            .icon-VIP-11 {
              color: rgb(102, 43, 31)
            }
          }

          .userIntroduce {
            color: $font_second_color;
            font-size: $font-size-sm;
            width: 180px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .songListAndVermicelli {
            font-size: $font-size-xs;
            color: $font_second_color;

            .songList {
              padding-right: 10px;
              border-right: 1px solid rgba(128, 128, 128, 0.47);
              margin-right: 10px;
            }
          }
        }

        .addPayAttention {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: $font-size-xs;
          font-family: $textFont;

          button {
            @extend .clearButton;
            border: 1px solid $lineColor;
            padding: 4px 8px;
            border-radius: 25px;

            span {
              vertical-align: 1px;
              font-size: 12px;
              color: $font_red_color;
            }
          }
        }
      }

      &:hover {
        background-color: rgb(250, 250, 250);
      }
    }
  }
}
</style>
